<template>
    <div class="BCBox">
        <div class="BC_Container">
            <div class="BCW_hot">
                <div class="BCW_All_Title">
                    <span class="iconfont icon-hengxian1 line hxlf"></span>
                    <span class="headline">全部分类</span>
                    <span class="iconfont icon-hengxian line hxrf"></span>
                </div>
                <div class="BCWH_Box Womencontainer">
                    <!-- <div class="BCWHBContent" v-for="(item,index) in labelList" :key="index"> -->
                    <router-link class="BCWHBContent" tag="div" v-for="(item,index) in labelList" :key="index" :to="'/CategoryPages?text='+item.name">
                        <div class="BCWHBC_Text">
                            {{item.name}}
                        </div>
                        <div class="BCWHBC_Img">
                            <img :src="item.cover" alt="">
                        </div>
                    </router-link>
                    <!-- </div> -->
                </div>
            </div>
            <div class="BCW_bottom">
                <p class="bigText">免费看书100年</p>
                <p>七猫免费小说</p>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { Tab, Tabs } from 'vant';
import {getStoreNode,getStoreInfo} from "../../api/bookClassify"

Vue.use(Tab);
Vue.use(Tabs);
export default {
    data(){
        return{
            getid:null,
            labelList:[],
        }
    },
    methods:{
        // 获取频道下的分类
        getStoreInfoFun(id){
            getStoreInfo({type:"female",bar:"cat",uuid:id}).then(data=>{
                console.log(data)
                this.labelList = data.list[0].labels;
                console.log(this.labelList)
            })
        },
        // 获取所有频道
        getStoreNodeFun(){
            getStoreNode().then(data=>{
                console.log(data);
                this.getid = data.books[1].node[0].id;
                this.getStoreInfoFun(this.getid)
            })
        },
    },
    async created(){
        this.getStoreNodeFun();
    }
}
</script>

<style lang="less">
.BCBox{
    background-color: #fff;
}
.BC_Container{
    width: 92%;
    margin: 0px auto;
}
.BCW_All_Title{
    text-align: center;
    position: relative;
    overflow: hidden;
    line-height: 60px;
    span.line{
        position: absolute;
        font-size: 12px;
        color: #eee;
    }
    span.line.hxlf{
        top: 0px;
        left: 35px;
    }
    span.line.hxrf{
        top: 0px;
        right: -165px;
    }
    span.headline{
        color: #4d4d4d;
        font-size: 20px;
        font-weight: bold;
    }
}
.BCW_hot{
    background-color: #fff;
    .BCWH_Box{
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .BCWHBContent{
            width: 44%;
            display: flex;
            align-items: center;
            justify-content: space-around;
            background-color: #f5f5f5;
            padding: 10px 8px;
            border-radius: 5px;
            margin-bottom: 10px;
            .BCWHBC_Text{
                font-weight: bold;
            }
            .BCWHBC_Img{
                width: 40px;
                height: 55px;
                background-color: pink;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
    }
}
.BCW_bottom{
    background-color: #fff;
    text-align: center;
    color: #eaeaea;
    padding-top: 30px;
    padding-bottom: 50px;
    .bigText{
        font-size: 22px;
        font-weight: bold;
    }
}
</style>

